<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>汇率换算</title>
  <script src="./js/vue.js"></script>
</head>
<body>
  <div class="vm">
    <label>人民币</label>
    <input type="text" :value='RMB' class="RMB" @input="blur">
    <span>=美元:{{RMB | conversion('¥')}}元</span>
    <br>
    <br>
    <label>美元</label>
    <input type="text" :value='US' class="US" @input="blur2">
    <span>=人民币:{{US | conversion('$')}}元</span>
</div>

<script>
    Vue.config.productionTip = false;

    Vue.filter("conversion", (value, MoneyStr) => 
    {
        if (MoneyStr == "¥") {
            return Number(value) * 0.1555;
        } else {
            return Number(value) * 6.8666;
        }
    })
    new Vue({
        data: {
            RMB: 0,
            US: 0,
        },
        methods: {
            blur: function () {
                this.RMB = document.querySelector(".RMB").value;
            },
            blur2: function(){
                this.US = document.querySelector(".US").value;
            }
        },
    }).$mount(".vm")
</script>
</body>
</html>